<template>
<div>
  <div class="fixed">
    <div class="container def">
      <div style="float:left;margin-top:10px;">
        <img height="60px;" src="../assets/logo.png" alt="logo">
      </div>
      <ul>
        <router-link to="/index" active-class="active"><li>发现好货</li></router-link>
        <router-link to="/mall" active-class="active"><li>商城</li></router-link>
        <router-link to="/user" active-class="active"><li style="float:right;"><i class="el-icon-user-solid"></i></li></router-link>
        <router-link to="/car" active-class="active">
          <li style="float:right;">
            <i class="el-icon-shopping-cart-full"></i>
          </li>
        </router-link>
      </ul>
      <div class="search">
        <i class="el-icon-search" @click="searchInput"></i>
        <input @blur="userInput" type="text" placeholder="搜索" v-model="search" @keyup.enter="searchInput">
      </div>
    </div>
  </div>
  <div style="background:#21242E;">
    <div class="container def">
      <div style="float:left;margin-top:10px;">
        <img height="60px;" src="../assets/logo.png" alt="logo">
      </div>
      <ul>
        <router-link to="/index" active-class="active"><li>发现好货</li></router-link>
        <router-link to="/mall" active-class="active"><li>商城</li></router-link>
        <router-link to="/user" active-class="active"><li style="float:right;"><i class="el-icon-user-solid"></i></li></router-link>
        <router-link to="/car" active-class="active"><li style="float:right;"><i class="el-icon-shopping-cart-full"></i></li></router-link>
      </ul>
      <div class="search">
        <i class="el-icon-search" @click="searchInput"></i>
        <input type="text" placeholder="搜索" v-model="search" 
          @keyup.enter="searchInput">
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
// 该组件为网页头部组件
import {reqGoodsSearch} from '../api'
export default {
    name:'Nav',
    data() {
      return {
        search:'', //搜集输入框的数据
      }
    },
    methods:{
      userInput(){
        // 传递用户输入的值
        this.$store.commit('userInput',this.search)
      },
      searchInput(){ //点击搜索图标的事件
        if (this.search === '') {
          // this.$message.warning('请输入关键字搜索！')
          return
        }else{
          // 以下两行清楚mall组件的选中状态
          let mark = {type:'',price:'',time:''}
          this.$store.commit('markSelected',mark)
          // 传递用户输入的值
          this.$store.commit('userInput',this.search)
          if (this.$route.path !== '/mall') {
            this.$router.push('/mall');
          }
          this.$store.commit('goodsSort',reqGoodsSearch(this.search))
        }
      }
    },
}
</script>

<style scoped>
  .fixed{
    position: fixed;
    background:#21242E;
    width: 100%;
    z-index: 100;
    box-shadow: 0 5px 25px #242424;
  }
  .active{
    color: #C69C6C;
  }
  .active li{
    box-sizing: border-box;
    height: 80px;
    line-height: 70px;
    border-top: 5px solid #C69C6C;
    background: #393D45;
  }
  ul{
    /* 解决高度塌陷 */
    overflow: hidden;
  }
  ul li{
    cursor: pointer;
    font-family:'宋体';
    text-align: center;
    float: left;
    width: 5rem;
    line-height: 80px;
  }
  ul li:hover{
    background: #393D45;
    color: #C69C6C;
  }
  .def{
    color: white;
    background: #21242E;
    position: relative;
  }
  .search{
    height: 40px;
    width: 400px;
    position: absolute;
    margin:auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  ul i{
    color: #C69C6C;
    font-size: 24px;
  }
  .search i{
    position: relative;
    top: 1px;
    left: 25px;
  }
  input[type='text']{
    height: 100%;
    width: 80%;
    border: 1px solid #393D45;
    background: #393D45;
    color: white!important;;
    padding-left: 40px;
    border:1px solid #21242E;
    /* outline: none; */
    /* color: gray; */
    /* -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out; */
  }
</style>